import { Button, Space, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React from 'react'
//1. 声明单条数据的结构接口
interface Phone {
  remote_img: string;
  title: string;
  price: string;
  shop: string;
  url: string;
  isZY: boolean;
  img: string;
  id: number;
}

export default function PhoneCom() {
  //2. 声明表格的结构
  let columns:ColumnsType<Phone> = [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '标题',
      dataIndex: 'title',
      render: (title, record) => {
        return <a rel="noreferrer" target="_blank" href={record.url}>{title}</a>;
      }
    },
    {
      title: '价格',
      dataIndex: 'price'
    },
    {
      title: '店铺',
      dataIndex: 'shop'
    },
    {
      title: '图片',
      dataIndex: 'img',
      render: (img) => {
        return <img width="50" alt="" src={'http://cdn.xiaohigh.com' + img} />
      }
    },
    {
      title: '操作',
      render: (_, record) => {
        return <Space><Button type='primary'>修改</Button><Button>删除</Button></Space>
      }
    }
  ];
  //3. 数据
  let data = [{
    "remote_img": "http://img14.360buyimg.com/n7/jfs/t1/190177/5/20205/91340/612dc9d1Ea57ded86/53a5e2d24dabf32d.jpg",
    "title": "一加 OnePlus 9 Pro 5G旗舰2K+120Hz 柔性屏12GB+256GB 绿洲 骁龙888 65W快充 哈苏专业模式 超广角拍照手机",
    "price": "5499.00",
    "shop": "一加手机京东自营官方旗舰店",
    "url": "https://item.jd.com/100019141914.html",
    "isZY": true,
    "img": "/images/goods/53a5e2d24dabf32d.jpg",
    "id": 1
  },
  {
    "remote_img": "http://img13.360buyimg.com/n7/jfs/t1/189261/39/3773/121751/60a269ecE4cd8a070/df2735c6ee1a895a.jpg",
    "title": "荣耀Play5T 22.5W超级快充 5000mAh大电池 6.5英寸护眼屏 全网通8GB+128GB极光蓝",
    "price": "1189.00",
    "shop": "荣耀京东自营旗舰店",
    "url": "https://item.jd.com/100021830458.html",
    "isZY": true,
    "img": "/images/goods/df2735c6ee1a895a.jpg",
    "id": 2
  },
  {
    "remote_img": "http://img13.360buyimg.com/n7/jfs/t1/198525/38/8395/144282/6140705bE7dd39929/e805d8c02b7e1f3b.jpg",
    "title": "Redmi Note 9 4G 6000mAh大电池 骁龙662处理器  18W快充 羽墨黑 6GB+128GB 智能手机 小米 红米",
    "price": "999.00",
    "shop": "小米京东自营旗舰店",
    "url": "https://item.jd.com/100016784108.html",
    "isZY": false,
    "img": "/images/goods/e805d8c02b7e1f3b.jpg",
    "id": 3
  },
  {
    "remote_img": "http://img11.360buyimg.com/n7/jfs/t1/186256/6/554/135561/6082904aE2a61d056/c921c551039621d0.jpg",
    "title": "荣耀畅玩20 5000mAh超大电池续航 6.5英寸大屏  莱茵护眼 4GB+128GB 极光蓝 双卡双待 全网通",
    "price": "889.00",
    "shop": "荣耀京东自营旗舰店",
    "url": "https://item.jd.com/100011186161.html",
    "isZY": false,
    "img": "/images/goods/c921c551039621d0.jpg",
    "id": 4
  },
  {
    "remote_img": "http://img13.360buyimg.com/n7/jfs/t1/200673/15/4432/202879/612ddc90Ec08afda5/9ef1faa1babfcf31.jpg",
    "title": "Redmi 9A 5000mAh大电量 1300万AI相机 八核处理器 人脸解锁 4GB+64GB 晴空蓝 游戏智能手机 小米 红米",
    "price": "599.00",
    "shop": "小米京东自营旗舰店",
    "url": "https://item.jd.com/100014348478.html",
    "isZY": true,
    "img": "/images/goods/9ef1faa1babfcf31.jpg",
    "id": 5
  }];

  return (
    <div>
      <Table 
        bordered
        columns={columns}
        dataSource={data}
        rowKey={'id'}
        pagination={{
          current: 2,
          pageSize: 2,
          total: 10,
          showSizeChanger: true
        }}
      />
    </div>
  )
}
